<template>
<!--  echarts容器默认宽高是0，不进行设置页面不显示 -->
<div>
 <div ref="ddata" class="form-div">
     <el-form>
       <el-form-item label="选择年份:">
          <el-select v-model="queryParams.year" placeholder="YYYY" @visible-change="yearChange($event)" style="width:400px;padding-right: 50px;">
            <el-option
              v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-button size="mini" @click="tapSale()">确定</el-button>
       </el-form-item>
     </el-form>
  </div>
  <div ref="mychart" id="demo"></div>

  <div ref="mychart2" id="demo"></div>

  </div>

</template>

<script>
  import {listBuyOrder} from "@/api/tea/echarts";
  //引用ecahrts
  import * as echarts from "echarts"
  export default{
    data(){
      return{
        //6种茶叶销售列表
        data1:[],
        data2:[],
        data3:[],
        data4:[],
        data5:[],
        data6:[],
        total1:0,
        total2:0,
        total3:0,
        total4:0,
        total5:0,
        total6:0,
        queryParams:{
          year:2023,
          month:1
        },
        orderList:[],
        totalp1:0,
        totalp2:0,
        totalp3:0,
        totalp4:0,
        totalp5:0,
        totalp6:0,
        years:[],
        optionline:{
          title:{
            text:"茶叶销量统计"
          },
          tooltip:{
            trigger:'axis',
            axisPointer:{
              type:'cross',
              label:{
                backgroundColor:'#ccc'
              }
            }
          },
          legend:{
            data:['绿茶','红茶','黄茶','乌龙茶','黑茶','白茶']
          },
          grid:{
            left:'3%',
            right:'5%',
            bottom:'3%',
            containLabel:true
          },
          toolbox:{
            feature:{
              magicType:{
                type:['stack','tiles']
              },
              saveAsImage:{}
            }
          },
          xAxis:{
            type:'category',
            boundaryGap:false,//与边缘留白区域
            data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
          },
         yAxis: {          //纵轴标尺固定
           type: 'value',
           scale: true,
           name: '销量',
           max: 1000,
           min: 0,
           axisLabel: {formatter: '{value} g'},
           boundaryGap: [0.2, 0.2]
         },
         series:[]
        },
        myEcharts:""
      }
    },
    created(){
      this.getBuyList()

    },
    methods:{
      //自定义年份查询
      tapSale(){
        this.data1=[]
        this.data2=[]
        this.data3=[]
        this.data4=[]
        this.data5=[]
        this.data6=[]
        this.getBuyList()
        console.log("最新数据")
        console.log(this.data1)
         console.log(this.data1)
         this.getSerise()
         this.chartChange()
      },
      chartChange(){
       if ( this.myEcharts != null && this.myEcharts != "" && this.myEcharts != undefined ) {
            this.myEcharts.dispose();
       }
       this.myEcharts=null
       this.myEcharts=echarts.init(this.$refs.mychart)
       this.myEcharts.setOption(this.optionline,true)
      },
      getSerise(){
        let series1=[//系列，当前数据映射的图形
             {
               name:"绿茶",
               data:this.data1,
               type:'line',
               // stack:'x'
             },
             {
               name:"红茶",
               data:this.data2,
               type:'line',
               // stack:'x'
             },
             {
               name:"黄茶",
               data:this.data3,
               type:'line',
               // stack:'x'
             },
             {
               name:"乌龙茶",
               data:this.data4,
               type:'line',
               // stack:'x'
             },
             {
               name:"黑茶",
               data:this.data5,
               type:'line',
               // stack:'x'
             },
             {
               name:"白茶",
               data:this.data6,
               type:'line',
               // stack:'x'
             }
        ]
        this.optionline.series=series1
      },
      //得到每种茶叶，每月的销量怎么放置
      getBuyList() {
        for(let i=1;i<=12;i++){
          this.queryParams.month=i
          listBuyOrder(this.queryParams).then(response => {
          console.log("后台传来参数",response)
          this.orderList = response;
          this.setList(this.orderList)
          this.getProfitList(this.orderList)
          });
        }
      },
      setList(arr){
        this.total1=0
        this.total2=0
        this.total3=0
        this.total4=0
        this.total5=0
        this.total6=0
        let total=0
        arr.forEach((item,index)=>{
          console.log("订单",item)
          let total=item.totalct
          if(item.teaLeaf.leafType==1)
          {
             this.total1=total+this.total1
          }
          if(item.teaLeaf.leafType==2){
             this.total2=total+this.total2
          }
          if(item.teaLeaf.leafType==3){
           this.total3=total+this.total3
          }
          if(item.teaLeaf.leafType==4){
             this.total4=total+this.total4
          }
          if(item.teaLeaf.leafType==5){
             this.total5=total+this.total5
          }
          if(item.teaLeaf.leafType==6){
             this.total6=total+this.total6
          }
        })
        this.data1.push(this.total1)
        this.data2.push(this.total2)
        this.data3.push(this.total3)
        this.data4.push(this.total4)
        this.data5.push(this.total5)
        this.data6.push(this.total6)

      },
       yearChange () {
          var myDate = new Date()
          var startYear = myDate.getFullYear() - 5// 起始年份
          var endYear = myDate.getFullYear()// 结束年份

          this.years = []
          for (var i = startYear; i <= endYear; i++) {
            this.years.push({value: (i), label: (i)})
          }
      },
      getStoreList(){

      },
      getProfitList(arr){
        //利润
        let total=0
        arr.forEach((item)=>{
          total=item.totalpri
          if(item.teaLeaf.leafType==1)
          {
             this.totalp1=total+this.totalp1
          }
          if(item.teaLeaf.leafType==2){
             this.totalp2=total+this.totalp2
          }
          if(item.teaLeaf.leafType==3){
           this.totalp3=total+this.totalp3
          }
          if(item.teaLeaf.leafType==4){
             this.totalp4=total+this.totalp4
          }
          if(item.teaLeaf.leafType==5){
             this.totalp5=total+this.totalp5
          }
          if(item.teaLeaf.leafType==6){
             this.totalp6=total+this.totalp6
          }

        })
      }
    },
    mounted() {
     setTimeout(() => {
            // let myEcharts=echarts.init(this.$refs.mychart)
            let myEchartspie=echarts.init(this.$refs.mychart2)

            let option={
              title:{
                text:"销售统计",
                left:"center"
              },
             tooltip: {
                      trigger: 'item'
             },
            legend: {
                  orient: 'vertical',
                  left: 'left',
              },
              series:[
                {
                  name:"饼状图",
                  type:"pie",
                  data:[
                    {value:this.totalp1,name:"红茶"},
                    {value:this.totalp2,name:"白茶"},
                    {value:this.totalp3,name:"绿茶"},
                    {value:this.totalp4,name:"花茶"},
                    {value:this.totalp5,name:"黑茶"},
                    {value:this.totalp6,name:"黄茶"}
                  ],
                  label:{
                      show:true,
                      formatter:function(arg){
                          return arg.data.name + '类型' + arg.data.value + '元\n' + arg.percent + '%'
                      }
                  },
                  center:['50%','50%']
                }
              ]
            }
            // myEchartspie.setOption(option)
            myEchartspie.setOption(option,true)
            this.getSerise()
            this.chartChange()
     },3000)

    }
  }
</script>

<style>
  .form-div{
    padding: 20px 40px;
  }
  #demo{
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
    padding: 0 40px;
    padding-bottom: 40px;
  }
</style>
